const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//用来导入css文件，比style-loader好一些
module.exports = {
    mode: 'development',
    //单入口
    // entry: './src/abc.js',
    //多入口,webpack打包工具需要从这个进入
    entry: {
        x: './src/index.js',
        y: './src/prodect.js'
    },
    //输出，webpack打包工具需要在这个文件进行输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        clean: true//输出的时候先清空dist文件的内容
    },
    //设置自动生成html文件引入打包后的js
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['x']
        }),
        new HtmlWebpackPlugin({
            template: './src/prodect.html',
            filename: 'prodect.html',
            chunks: ['y']
        }),
        //复制文件从src文件到打包后的文件夹，但是没有改动和压缩等
        new CopyWebpackPlugin({
            patterns: [{
                from: './src/images',
                to: 'images'
            }]
        }),
        new MiniCssExtractPlugin({
            //生成的文件名及路径
            filename: 'css/main[id].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },

}